@import "./base.scss";
$icon-size: 24px;
.asm-table{
  width: 100%;
  .asm-tr{
    align-items: stretch;
    display: flex;
    padding: $base-padding / 2 0;
    border-bottom: 1px dashed #efefef;
    &.asm-tr-1 {
      padding: $base-padding / 4 0;
    }
    &.asm-tr-0 {
      padding: 0;
    }
    &.asm-pause{
      background: $red;
    }
    &.asm-active{
      background: $green;
    }
    &.asm-tr-loading{
      min-height: 500px;
      display: flex;
      align-items: center;
    }
    &.asm-head{
      background: #f9f9f9;
    }
    &:last-child{
      border: none;
      // padding-bottom: $base-padding;
    }
    & > .asm-no {
      width: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    & > .asm-td.blue{
      color: $active-color;
    }
    & > .asm-th,& > .asm-td{
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex-grow: 2;
      flex-basis: 0;
      flex-shrink: 0;
      &.asm-grow-1{
        flex-grow: 1;
      }
      &.asm-grow-3{
        flex-grow: 3;
      }
      &.asm-grow-5{
        flex-grow: 5;
      }
      &.asm-grow-6{
        flex-grow: 6;
      }
      &.asm-grow-8{
        flex-grow: 8;
      }
      &.left {
        padding-left: $base-padding * 3;
        justify-content: flex-start;
      }
      &.left-no-padding {
        justify-content: flex-start;
      }
      &.right-no-padding {
        justify-content: flex-end;
      }
      &.right {
        padding-right: $base-padding * 3;
        justify-content: flex-end;
      }
      .button {
        background: $active-color;
        border: none;
        width: 26px;
        height: 26px;
        padding: 0;
        margin-right: 10px;
        &:hover{
          background: $active-color-hover;
        }
      }
      .arrow{
        width: 25px;
        height: 20px;
        cursor: pointer;
        background: url('~@/assets/img/sort_default.png') no-repeat center;
        background-size: 12px 10px;
      }
      &.active {
        .arrow.asc{
          background-image: url('~@/assets/img/sort_asc.png');
        }
        .arrow.desc{
          background-image: url('~@/assets/img/sort_desc.png');
        }
      }
      .icon{
        width: $icon-size;
        height: $icon-size;
        border-radius: $base-radius;
        border: none;
      }
    }
  }
  a.blue {
    color: $active-color;
    &:hover{
      color: $active-color-hover;
    }
  }
  .asm-no-data{
    width: 100%;
    height: 380px;
    background: url('~@/assets/img/no-data.png') no-repeat center;
    background-size: 294px 145px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: $base-padding * 3;
  }
}
